<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
 <!-- Custom Theme files -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="keywords" content="" />
 <link rel="stylesheet" href="css/dashang.css">
 <link rel="stylesheet" href="css/yin.js">
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src='js/prefixfree.min.js'></script>
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>

</head>
	<body>
		<!-- container -->
			<!-- 头部 -->
			<div id="home" class="header">
				
				<div class="container">
				<!-- top-hedader -->
				<div class="top-header">
					
					<!--top-nav-->
					<div class="top-nav">
					<div class="navigation">
					<div class="logo">
						<h1><a href="index.html"><span>😘</span>程序员</a></h1>
					</div>
					<div class="navigation-right">
						<span class="menu"><img src="images/menu.png" alt=" " /></span>
						<nav class="link-effect-3" id="link-effect-3">
							<ul class="nav1 nav nav-wil">
								<li class="active"><a  href="index.html">家</a></li>
								<li><a class="scroll"  href="#about">	关于</a></li>
								<li><a class="scroll"  href="#services" >服务</a></li>
								<li><a class="scroll"  href="#work">经验</a></li>
								<li><a class="scroll"  href="#port">文件夹</a></li>
								<li><a class="scroll"  href="#blogs">博客</a></li>
								<li><a class="scroll"  href="#contact">接触</a></li>
							</ul>
						</nav>
							<!-- script-for-menu -->
								<script>
								   $( "span.menu" ).click(function() {
									 $( "ul.nav1" ).slideToggle( 300, function() {
									 // Animation complete.
									  });
									 });
								</script>
							<!-- /script-for-menu -->
					</div>
					<div class="clearfix"></div>
				</div>
				<!-- /top-hedader -->
				</div>
			<div class="banner-info">
				<div class="col-md-7 header-right">
					<h1>嗨 !</h1>
					<h6>JavaScript & H5 全栈开发工程师</h6>
					<ul class="address">
					
					<li>
							<ul class="address-text">
								<li><b>姓名</b></li>
								<li>Biao.Sir</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>姓别</b></li>
								<li>男</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>手机</b></li>
								<li>13327594162   或     18810411916</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>地址 </b></li>
								<li>山西省运城市</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>邮箱 </b></li>
								<li><a href="https://mail.qq.com/"> 1449663088@qq.com</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>网站 </b></li>
								<li><a href="#">**********</a></li>
							</ul>
						</li>
						
					</ul>
				</div>
				<div class="col-md-5 header-left">
					<img src="images/biao.jpg" alt="" style="width:300px; height:290px;">
				</div>
				<div class="clearfix"> </div>
						
		      </div>
			</div>
		</div>
		<div class="content">
					<p><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="打赏，支持一下">打赏</a></p>
					<div class="hide_box"></div>
					<div class="shang_box">
						<a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="关闭"><img src="img/close.jpg" alt="取消" /></a>
						<div class="shang_tit">
							<p>感谢您的支持，我会继续努力的!</p>
						</div>
						<div class="shang_payimg">
							<img src="img/alipayimg.jpg" alt="扫码支持" title="扫一扫" />
						</div>
						<div class="pay_explain">扫码打赏，你说多少就多少</div>
						<div class="shang_payselect">
							<div class="pay_item checked" data-id="alipay">
								<span class="radiobox">😚</span>
								<span class="pay_logo"><img src="img/alipay.jpg" alt="支付宝" /></span>
							</div>
							<div class="pay_item" data-id="weipay">
								<span class="radiobox">😚</span>
								<span class="pay_logo"><img src="img/wechat.jpg" alt="微信" /></span>
							</div>
						</div>
						<div class="shang_info">
							<p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
						</div>
					</div>
				</div>
				<script type="text/javascript">
					$(function() {
						$(".pay_item").click(function() {
							$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
							var dataid = $(this).attr('data-id');
							$(".shang_payimg img").attr("src", "img/" + dataid + "img.jpg");
							$("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
						});
					});
					function dashangToggle() {
						$(".hide_box").fadeToggle();
						$(".shang_box").fadeToggle();
					}
				</script>
	</div>
	
			<!-- about -->
			<div id="about" class="about">
					
				<div class="col-md-6 about-left">
					
					<div id="owl-demo1" class="owl-carousel owl-carousel2">
					                <div class="item">
					                	<div class="about-left-grid">
											<h2>Hello! 我是 <span>&nbsp;&nbsp;Yin Biao Biao</span></h2>
											<p>一个爱学习，知上进，善沟通，重细节，懂感恩的人。具有丰富项目经验，良好的变成习惯以及有较强的有学习适应能力。态度决定一切，给我一个机会决，我会给你一个大大的惊！喜喜。<br/>对我来说，失败在生活中并不可怕，它于我是一种挑战，更是一种享受。它给了我鼓励，给了我勇气，给了我自信，让我走向成功。</p>
											<ul>
												<li><a class="a-btn-a scroll" href="#port">这就是我</a></li>
												<li><a class="a-btn-h scroll" href="#contact">IT程序员</a></li>
											</ul>
										</div>
					                </div>
					                  <div class="item">
					                	<div class="about-left-grid">
											<h2>Hello! 我是 <span>Yin&nbsp;&nbsp;&nbsp;Yin puma Biao</span></h2>
											<p>一个爱学习，知上进，善沟通，重细节，懂感恩的人。具有丰富项目经验，良好的变成习惯以及有较强的有学习适应能力。态度决定一切，给我一个机会决，我会给你一个大大的惊！喜喜。<br/>对我来说，失败在生活中并不可怕，它于我是一种挑战，更是一种享受。它给了我鼓励，给了我勇气，给了我自信，让我走向成功。</p>
											<ul>
												<li><a class="a-btn-a scroll" href="#port">这就是我</a></li>
												<li><a class="a-btn-h scroll" href="#contact">IT程序员</a></li>
											</ul>
										</div>
					                </div>
					                  <div class="item">
					                	<div class="about-left-grid">
											<h2>Hello!  我是 <span>Biao.Yin.Biao</span></h2>
											<p>一个爱学习，知上进，善沟通，重细节，懂感恩的人。具有丰富项目经验，良好的变成习惯以及有较强的有学习适应能力。态度决定一切，给我一个机会决，我会给你一个大大的惊！喜喜。<br/>对我来说，失败在生活中并不可怕，它于我是一种挑战，更是一种享受。它给了我鼓励，给了我勇气，给了我自信，让我走向成功。</p>
											<ul>
												<li><a class="a-btn-a scroll" href="#port">这就是我</a></li>
												<li><a class="a-btn-h scroll" href="#contact">IT程序员</a></li>
											</ul>
										</div>
					                </div>
					</div>
				</div>
				<div class="col-md-6 about-right">
					
				</div>
				<div class="clearfix"> </div>
							<link href="css/owl.carousel.css" rel="stylesheet">
							    <script src="js/owl.carousel.js"></script>
			<script>
				$(document).ready(function() {
					$("#owl-demo1").owlCarousel({
						items : 1,
						lazyLoad : false,
						autoPlay : true,
						navigation : false,
						navigationText :  false,
						pagination : true,
					});
				});
			</script>
			<!-- Feedback -->
			<script>
				$(document).ready(function() {
					$("#owl-demo3").owlCarousel({
						items : 1,
						lazyLoad : false,
						autoPlay : true,
						navigation : false,
						navigationText :  true,
						pagination :true,
					});
				});
			</script>
			</div>
			<!-- /about -->
			<!-- services -->
			<div id="services" class="services">
				<div class="container">
					<div class="service-head one text-center ">
						<h4>我做什么？</h4>
						<h3>My<span>技能</span></h3>
						<span class="border two"></span>
					</div>
					<!-- services-grids -->
					<div class="wthree_about_right_grids w3l-agile">
				<div class="col-md-6 wthree_about_right_grid">
					<div class="col-xs-4 wthree_about_right_grid_left">
						<div class="hvr-rectangle-in">
							<i class="glyphicon glyphicon-pencil"></i>
						</div>
					</div>
					<div class="col-xs-8 wthree_about_right_grid_right">
						<h4>Vue</h4>
						<p>使用Vue+webpack搭建项目，并了解Vue配置路由，实现（SPA）单页面应用。掌握git的代码管理</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 wthree_about_right_grid">
					<div class="col-xs-4 wthree_about_right_grid_left">
						<div class="hvr-rectangle-in">
							<i class="glyphicon glyphicon-cog"></i>
						</div>
					</div>
					<div class="col-xs-8 wthree_about_right_grid_right">
						<h4>HTML+CSS</h4>
						<p>能够书写语义合理，结构清晰，易维护的静态页面。熟练HTML+CSS3来实现网页搭建，熟练使用JQuery/zepto等js库</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 wthree_about_right_grid">
					<div class="col-xs-4 wthree_about_right_grid_left">
						<div class="hvr-rectangle-in">
							<i class="glyphicon glyphicon-leaf"></i>
						</div>
					</div>
					<div class="col-xs-8 wthree_about_right_grid_right">
						<h4>React</h4>
						<p>熟练掌握React+create-react-app‘项目名’搭建项目，并了解React配置路由，掌握Bootstarp、swiper、Element布局</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 wthree_about_right_grid">
					<div class="col-xs-4 wthree_about_right_grid_left">
						<div class="hvr-rectangle-in">
							<i class="glyphicon glyphicon-gift"></i>
						</div>
					</div>
					<div class="col-xs-8 wthree_about_right_grid_right">
						<h4>HTML+CSS</h4>
						<p>能够书写语义合理，结构清晰，易维护的静态页面。熟练HTML+CSS3来实现网页搭建，熟练使用JQuery/zepto等js库</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>

					<!-- services-grids -->
				</div>
			</div>
			<!-- services -->
			<!-- <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div> -->
			<!--work-experience-->
	<div id="work" class="work">
		<div class="container">
			<div class="service-head text-center">
						<h4>我做过什么</h4>
						<h3>My<span>&nbsp;&nbsp;&nbsp;&nbsp;经验</span></h3>
						<span class="border one"></span>
					</div>
					<div class="time-main w3l-agile">
							<div class="col-md-6 year-info">
							   <ul class="year">
								   <li>2016</li>
								   <li>2015</li>
								   <li>2014</li>
								   <li>2013</li>
								   <li>2012</li>
								   <div class="clearfix"></div>
								</ul>
							</div> 
					                        <ul class="col-md-6 timeline">
																<li>
																  <div class="timeline-badge info"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																		
																	  <h4 class="timeline-title"><a href="https://cxt.1688.com"><img src="images/111.png" alt="" style="width:30px;height:30px;"></a>Alibaba Group</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>非常想去中国最大的 Alibaba Group  为Alibaba Group做IT工作，从新改善Alibaba Group。 </p>
																	</div>
																  </div>
																</li>
																
																<li>
																  <div class="timeline-badge primary"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title"><a href="https://jd.com"><img src="images/222.jpg" alt="" style="width:30px;height:30px;"></a>JD.COM</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>非常想去中国最大的 JD.COM  为JD.COM做IT工作 做到更好，更完美，更好的展现自己的所有技能。用自己的实际行动改变别人对自己的眼光，让他们惊讶。</p>
																	</div>
																  </div>
																</li>
																
																
																
																<li>
																  <div class="timeline-badge danger"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title"><a href="https://baodu.com"><img src="images/333.gif" alt="" style="width:30px;height:30px;"></a>Baidu</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>非常想去中国最大的 Baidu  为Baidu做IT工作。做到更好，更完美，更好的展现自己的所有技能。 </p>
																	</div>
																  </div>
																</li>
																
																<li>
																  <div class="timeline-badge success"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title"><a href="https://www.taobao.com/"><img src="images/444.jpg" alt="" style="width:30px; height:30px;"></a>TaoBao</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>非常想去中国最大的 TaoBao  为TaoBao做IT工作。 做到更好，更完美，更好的展现自己的所有技能。</p>
																	</div>
																  </div>
																</li>
																<li>
																  <div class="timeline-badge pass"><i class="glyphicon glyphicon-briefcase"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title"><a href="http://www.qq.com/"><img src="images/555.png" alt="" style="width:30px; height:30px;"></a>tencent</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>非常想去中国最大的 tencent  为tencent做IT游戏开发工作。做到更好，更完美，更好的展现自己的所有技能。</p>
																	</div>
																  </div>
																</li>
															</ul>
								<div class="clearfix"></div>
								</div>
						</div>
				</div>
	<!--//work-experience-->

		<!-- portfolio -->
<div class="portfolio" id="port">
				<div class="service-head text-center">
						<h4>我的生活</h4>
						<h3>My <span>文件夹</span></h3>
						<span class="border"></span>
					</div>
			<div class="portfolio-grids">
				<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
				<script type="text/javascript">
									$(document).ready(function () {
										$('#horizontalTab').easyResponsiveTabs({
											type: 'default', //Types: default, vertical, accordion           
											width: 'auto', //auto or any width like 600px
											fit: true   // 100% fit in a container
										});
									});
									
				</script>
				<div class="sap_tabs">
					<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						<ul class="resp-tabs-list">
							<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>所有</span></li> 
							<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>数据</span></li> 
							<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>移动的页面</span></li> 				
							<li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span>所选插件</span></li> 
						</ul>				  	 
						<div class="resp-tabs-container">
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal1" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb1.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal3" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb2.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb3.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
								
										<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb4.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb5.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb6.jpg" alt="">
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb7.jpg" alt="">
										
										</a>
								
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									
										<a href="#portfolioModal8" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb8.jpg" alt="">
										
										</a>
									
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb2.jpg" alt="" >
										
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd  ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb5.jpg" alt="" >
										
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb7.jpg" alt="" >
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb6.jpg" alt="" >
										
										</a>
									
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb9.jpg" alt="" >
										
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd  ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb4.jpg" alt="" >
										
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb3.jpg" alt="" >
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb1.jpg" alt="" >
										
										</a>
									
								</div>
								<div class="clearfix"></div>
							</div>
								<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb8.jpg" alt="" >
										
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd  ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb2.jpg" alt="" >
										
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb4.jpg" alt="" >
										
										</a>
									
								</div>
								<div class="col-md-3 team-gd ">
									
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/ybb6.jpg" alt="" >
										
										</a>
									
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>
				<div class="blog" id="blogs">
					<div class="container">
						<div class="service-head text-center">
						<h4>微博</h4>
						<h3>My  <span>关注部落</span></h3>
						<span class="border one"></span>
					</div>
					   <div class="news-grid w3l-agile">
					    <div class="col-md-6 news-img">
						  <a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/hh2.jpg" alt=" " class="img-responsive"></a>
						 
						</div>
					    <div class="col-md-6 news-text">
						   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">这里有一个Great的微博标题</a></h3>
							<ul class="news">
								<li><i class="glyphicon glyphicon-user"></i> <a href="#">My的信息</a></li>
								<li><i class="glyphicon glyphicon-comment"></i> <a href="#">200 个评论</a></li>
								<li><i class="glyphicon glyphicon-heart"></i> <a href="#">1000 个关注</a></li>
								<li><i class="glyphicon glyphicon-tags"></i> <a href="#">500 个粉丝</a></li>
							</ul>
							<p>关注了各种IT行业的形式。看一看新出的IT技术,看看正在秀的明星，瞧瞧现在正在发生的新鲜事，记下此时此刻的自己，正在打代码的情景。再看看国家大事。为自己的努力而奋斗。<br/>加油吧！少年！</p>
							<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">多看，微博!</a>
					
						</div>
		
						<div class="clearfix"></div>
					 </div>
					  <div class="news-grid">

					    <div class="col-md-6 news-text two">
						   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">这里有一个Great的微博标题</a></h3>
							<ul class="news">
								<li><i class="glyphicon glyphicon-user"></i> <a href="#">My的信息</a></li>
								<li><i class="glyphicon glyphicon-comment"></i> <a href="#">200 个评论</a></li>
								<li><i class="glyphicon glyphicon-heart"></i> <a href="#">1000 个关注</a></li>
								<li><i class="glyphicon glyphicon-tags"></i> <a href="#">500 个粉丝</a></li>
							</ul>
							<p>关注了各种IT行业的形式。看一看新出的IT技术,看看正在秀的明星，瞧瞧现在正在发生的新鲜事，记下此时此刻的自己，正在打代码的情景。再看看国家大事。为自己的努力而奋斗。<br/>加油吧！少年！</p>
								<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">多看，微博!</a>
					
						</div>
						<div class="col-md-6 news-img two">
						   <a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/hh3.jpg" alt=" " class="img-responsive"></a>
						 
						</div>
						<div class="clearfix"></div>
					 </div>
					  <div class="news-grid">
					    <div class="col-md-6 news-img">
						  <a href="#" data-toggle="modal" data-target="#myModal1"> <img src="images/hh1.jpg" alt=" " class="img-responsive"></a>
						 
						</div>
					    <div class="col-md-6 news-text">
						   <h3> <a href="#" data-toggle="modal" data-target="#myModal1">这里有一个Great的微博标题</a></h3>
							<ul class="news">
								<li><i class="glyphicon glyphicon-user"></i> <a href="#">My的信息</a></li>
								<li><i class="glyphicon glyphicon-comment"></i> <a href="#">200 个评论</a></li>
								<li><i class="glyphicon glyphicon-heart"></i> <a href="#">1000 个关注</a></li>
								<li><i class="glyphicon glyphicon-tags"></i> <a href="#">500 个粉丝</a></li>
							</ul>
							<p>关注了各种IT行业的形式。看一看新出的IT技术,看看正在秀的明星，瞧瞧现在正在发生的新鲜事，记下此时此刻的自己，正在打代码的情景。再看看国家大事。为自己的努力而奋斗。<br/>加油吧！少年！</p>
							<a href="#" data-toggle="modal" data-target="#myModal1" class="read hvr-shutter-in-horizontal">多看，微博!</a>
					
						</div>
		
						<div class="clearfix"></div>
					 </div>
					</div>
				</div>
				<!-- top-grids -->
	<!-- /blog-pop-->
			<div class="modal ab fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog about" role="document">
					<div class="modal-content about">
						<div class="modal-header">
							<button type="button" class="close ab" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
						</div>
						<div class="modal-body about">
								<div class="about">
									
									  <div class="about-inner">
									   
									      <img src="images/fr6.jpg" alt="about" style="width:300px;height:300px;"/>
										     <h4 class="tittle">没错，就是Me.<br/></h4>
										   <p>为人开朗，有幽默感，有耐心，能很好的跟同事相处。谦虚好学，自学能力强，有较强的责任心和团队合作精神。不轻言放弃,能够适应不同工作环境下的压力，愿意接受挑战性的工作，务实，沉着泠静，有计划，不怕辛苦。</p>
									  </div>
												
								</div>
						</div>
					</div>
				</div>
			</div>
			<!-- //blog-pop-->

			<!-- /header -->
<div class="footer" id="contact">
	<div class="container">
	<div class="service-head one text-center">
						<h4>联系我</h4>
						<h3> 与我联系</h3>
						<span class="border two"></span>
					</div>
		<div class="mail_us">
			<div class="col-md-6 mail_left">
				<div class="contact-grid1-left">
					<div class="contact-grid1-left1">
						<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
						<h4>Email&nbsp;&nbsp;&nbsp;联系我</h4>
						<ul>
							<li>邮箱: <a href="https://mail.qq.com/">1449663088@qq.com</a></li>
							<!-- <li>Mail2: <a href="mailto:info@example.com">info@example2.com</a></li> -->
						</ul>
					</div>
				</div>
					<div class="contact-grid1-left">
						<div class="contact-grid1-left1">
							<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
							<h4>电话联系</h4>
							<ul>
								<li>Mobile phone1 : 1332759****</li>
								<li>Mobile phone2 : 1881041****</li>
							</ul>
						</div>
					</div>
					<div class="contact-grid1-left">
						<div class="contact-grid1-left1">
							<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
							<h4>找寻地址</h4>
							<ul>
								<li>北京市  昌平区 </li>
								<li>Yin Puma Biao</li>
							</ul>
						</div>
					</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-6 mail_right">
				<form action="#" method="post">
					<input type="text" name="Name" value="名字" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
					<input type="email" name="Email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
					<input type="text" name="Mobile number" value="手机号码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Mobile number';}" required="">
					<textarea name="Message..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required>消息</textarea>
					<input type="submit" value="确定">
					
				</form>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
			
						<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
								<!--end-smooth-scrolling-->
<!-- //for bootstrap working -->
	<script src="js/bootstrap.js"></script>
	

	</body>
</html>

